<!--登录和注册-->

<template>
  <div @click="close" class="pc-login dialog-wrap" v-if="dialogVisible">
    <!--        <el-dialog :title="signUp?'注 册':'登 录'" class="pc loginDialog" :visible="dialogVisible" width="380px" :show-close="true" @close="dialogVisible=false">-->
    <!--            <div class="loginContent">-->
    <!--                <el-form :model="account" :rules="rules" ref="ruleForm">-->
    <!--                    <div class="m-list-group">-->
    <!--                        <el-form-item v-if="signUp" prop="nickName">-->
    <!--                            <el-input placeholder="昵称" prefix-icon="el-icon-chat-round" class="m-input"-->
    <!--                                      v-model.trim="account.nickName" maxLength="20"-->
    <!--                                      @keyup.enter.native="handleLogin"/>-->
    <!--                        </el-form-item>-->
    <!--                        <el-form-item prop="username">-->
    <!--                            <el-input placeholder="账号" prefix-icon="el-icon-user-solid" class="m-input"-->
    <!--                                      v-model.trim="account.username" maxLength="20"-->
    <!--                                      @keyup.enter.native="handleLogin"/>-->
    <!--                        </el-form-item>-->
    <!--                        <el-form-item prop="password">-->
    <!--                            <el-input placeholder="密码" prefix-icon="el-icon-lock" class="m-input"-->
    <!--                                      v-model.trim="account.password" show-password maxLength="20"-->
    <!--                                      @keyup.enter.native="handleLogin"/>-->
    <!--                        </el-form-item>-->
    <!--                        <el-form-item v-if="signUp" prop="mobile">-->
    <!--                            <el-input placeholder="手机号" prefix-icon="el-icon-mobile" class="m-input"-->
    <!--                                      v-model.trim="account.mobile"-->
    <!--                                      @keyup.enter.native="handleLogin"/>-->
    <!--                        </el-form-item>-->
    <!--                        <div style="display: flex;align-content: center;margin-bottom: 10px;padding-left: 10px"></div>-->
    <!--                    </div>-->
    <!--                </el-form>-->
    <!--            </div>-->
    <!--            <div slot="footer" class="dialog-footer">-->
    <!--                <el-button class="confirm" :loading="isLoging" :disabled="isLoging" type="primary"-->
    <!--                           @click.prevent="handleLogin">确 定-->
    <!--                </el-button>-->
    <!--                <div class="rem">-->
    <!--                    <el-checkbox v-model="isRemember">记住密码</el-checkbox>-->
    <!--                    <a href="#" @click="showSignUp">{{signUp?'登录':'注册'}}</a>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </el-dialog>-->
    <!--        <el-dialog title="登 录" :visible="dialogVisible" :modal="false" width="100%" class="mb loginDialog" :show-close="true" @close="dialogVisible=false">-->
    <!--            <div class="loginContent">-->
    <!--                <el-form>-->
    <!--                    <div class="m-list-group">-->
    <!--                        <el-form-item>-->
    <!--                            <el-input size type="text" placeholder="账号" class="m-input"-->
    <!--                                      v-model="account.username" @keyup.enter.native="handleLogin"/>-->
    <!--                        </el-form-item>-->
    <!--                        <el-form-item>-->
    <!--                            <el-input size type="password" placeholder="密码" class="m-input"-->
    <!--                                      v-model="account.password" @keyup.enter.native="handleLogin"/>-->
    <!--                        </el-form-item>-->
    <!--                        <div style="display: flex;align-content: center;margin-bottom: 10px;padding-left: 10px"></div>-->
    <!--                    </div>-->
    <!--                </el-form>-->
    <!--            </div>-->
    <!--            <div slot="footer" class="dialog-footer">-->
    <!--                <el-button :loading="isLoging" :disabled="isLoging" type="primary"-->
    <!--                           @click.prevent="handleLogin">确 定-->
    <!--                </el-button>-->
    <!--                <div>-->
    <!--                    <el-checkbox v-model="isRemember">记住密码</el-checkbox>-->
    <!--                    <el-button type="text">注册</el-button>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </el-dialog>-->

    <div class="login-content" role="dialog">
      <div class="login-content-left">
        <el-image :src="require('../../assets/imgs/log-register.png')"></el-image>
      </div>
      <div class="login-content-right">
        <div class="login-content-wrap" v-if="LocalSign">
          <div class="login-content-title">
            <div class="login-content-title-inner">
              <div>邮箱注册</div>
              <div class="border-bottom"></div>
            </div>
          </div>
          <div class="login-content-form">
            <el-form :model="accountSignIn" :rules="rules" class="register" ref="ruleFormIn">
              <el-form-item inline-message prop="username">
                <el-input
                  @keyup.enter.native="handleSignIn"
                  autocomplete="off"
                  class="m-input"
                  placeholder="请输入邮箱号"
                  size
                  type="text"
                  v-model="accountSignIn.username"
                />
                <el-input name="fakeusernameremembered" style="display:none" type="text"/>

                <i class="el-icon-check"></i>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  @keyup.enter.native="handleSignIn"
                  autocomplete="new-password"
                  class="m-input"
                  placeholder="请输入登录密码"
                  size
                  type="password"
                  v-model="accountSignIn.password"
                />
                <el-input name="fakeusernameremembereda" style="display:none" type="text"/>
              </el-form-item>
              <el-form-item
                prop="repassword"
                v-if="accountSignIn.password && accountSignIn.password.length > 5"
              >
                <el-input
                  @keyup.enter.native="handleSignIn"
                  autocomplete="off"
                  class="m-input"
                  placeholder="请再次输入登录密码"
                  size
                  type="password"
                  v-model="accountSignIn.repassword"
                />
              </el-form-item>
              <el-form-item prop="nickName">
                <el-input
                  @keyup.enter.native="handleSignIn"
                  autocomplete="off"
                  class="m-input"
                  placeholder="请输入昵称"
                  size
                  type="text"
                  v-model="accountSignIn.nickName"
                />
              </el-form-item>
              <!--                            <el-form-item>-->
              <!--                                <el-input size type="text" placeholder="请输入四位识别码" class="m-input"-->
              <!--                                          v-model="accountSignIn.sbm" @keyup.enter.native="handleSignIn"/>-->
              <!--                                <div id='checkCodeSignIn' class="code" @click="createCode(4)" ></div>-->
              <!--                            </el-form-item>-->
              <!--                            <el-form-item>-->
              <!--                                <el-input size type="text" placeholder="请输入手机号码" class="m-input"-->
              <!--                                          v-model="accountSignIn.mobile" @keyup.enter.native="handleSignIn"/>-->
              <!--                            </el-form-item>-->
              <el-form-item prop="messagecode">
                <el-input
                  @keyup.enter.native="handleSignIn"
                  autocomplete="off"
                  class="m-input"
                  placeholder="请输入邮箱验证码"
                  size
                  type="text"
                  v-model="accountSignIn.emailCode"
                />
                <el-button @click="getCode" class="checkCode" type="text">获取验证码</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  :disabled="isLoging"
                  :loading="isLoging"
                  @click.prevent="handleSignIn"
                  class="signUpButton"
                  type="primary"
                >注册</el-button>
              </el-form-item>
            </el-form>
            <div class="login-footer">
              已有账号？
              <el-button @click="switchSign('signUp')" type="text">直接登录</el-button>
              <el-button @click="resetForm()" v-if="hiddenForm">重置</el-button>
            </div>
          </div>
        </div>
        <div class="login-content-wrap" v-else>
          <div class="login-content-title">
            <div class="login-content-title-inner">
              <div>邮箱登录</div>
              <div class="border-bottom"></div>
            </div>
          </div>
          <div class="login-content-form">
            <el-form :model="accountSignUp" :rules="rules" ref="ruleFormUp">
              <el-form-item prop="username">
                <el-input
                  @keyup.enter.native="handleSignUp"
                  class="m-input"
                  placeholder="请输入邮箱号"
                  size
                  type="text"
                  v-model="accountSignUp.username"
                />
                <i class="el-icon-check"></i>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  @keyup.enter.native="handleSignUp"
                  class="m-input"
                  placeholder="请输入登录密码"
                  size
                  type="password"
                  v-model="accountSignUp.password"
                />
              </el-form-item>
              <!--    <el-form-item>
                                <el-input size type="text" placeholder="请输入四位识别码" class="m-input"
                                          v-model="accountSignUp.sbm" @keyup.enter.native="handleSignUp"/>
                                <div id='checkCodeSignUp' class="code" @click="createCode(4)" ></div>
              </el-form-item>-->
              <el-form-item>
                <el-button
                  :disabled="isLoging"
                  :loading="isLoging"
                  @click.prevent="handleSignUp"
                  class="signUpButton"
                  type="primary"
                >登录</el-button>
              </el-form-item>
            </el-form>
            <div class="login-footer">
              忘记密码？
              <el-button @click="switchSign('signIn')" type="text">立即注册</el-button>
            </div>
          </div>
        </div>
        <div class="close-tag">
          <el-link :underline="false" @click="closeDialog" icon="el-icon-close"></el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'login',
    props: ['dialogVisible', 'isSignIn'],
    data() {
        return {
            accountSignIn: {
                username: '',
                password: '',
                nickName: '',
                mobile: '',
            },
            accountSignUp: {
                username: '',
                password: '',
                nickName: '',
                mobile: '',
            },
            isLoging: false,
            isRemember: true,
            keys: 1,

            signUp: false,
            // signIn: this.isSignIn,//注册
            LocalSign: null,
            ruleForm: {},
            hiddenForm: false,
            rules: {
                nickName: [
                    {
                        required: true,
                        message: '请输入昵称',
                        trigger: 'change',
                    },
                ],
                username: [
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'change',
                    },
                    {
                        pattern: /^\S+$/,
                        message: '账号不能含有空格',
                        trigger: 'blur',
                    },
                    {
                        min: 6,
                        message: '账号不能少于 6 个字符',
                        trigger: 'blur',
                    },
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'change',
                    },
                    { min: 6, message: '密码不能少于6个字符', trigger: 'blur' },
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        pattern: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
                        message: '邮箱格式不正确',
                        trigger: 'change',
                    },
                ],
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^[1][345678][0-9]{9}/,
                        message: '手机号格式不正确',
                        trigger: 'change',
                    },
                ],
            },
        };
    },
    beforeMount() {},
    created() {},
    watch: {
        dialogVisible(newV, oldV) {
            if (newV) {
                this.LocalSign = this.isSignIn;
                // setTimeout(()=>{
                //      this.resetForm();
                // },1000)
                this.$nextTick(() => {
                    this.createCode(4);
                });
            }
        },
    },
    computed: {
        signIn() {
            return this.isSignIn;
        },
    },
    mounted() {},
    methods: {
        showSignUp() {
            this.signUp = !this.signUp;
        },
        handleLogin() {
            if (this.LocalSign) {
                //注册
                this.$refs.ruleForm.validate(res => {
                    if (res) {
                        this.$message.success(JSON.stringify(res));
                        this.$api.post(
                            '/cj_user/register',
                            {
                                uname: this.account.nickName,
                                emailVarchar: this.account.username,
                                passwordVarchar: this.account.password,
                                tel: this.account.mobile,
                            },
                            success => {
                                this.$message.success('注册成功');
                            },
                            fal => {
                                this.$message.error(fal);
                            }
                        );
                    } else {
                        return false;
                    }
                });
            } else {
                if (!this.account.username || !this.account.password) {
                    return this.$message.warning('用户名和密码不能为空');
                }
                this.isLoging = true;
                let params =
                    'username=' +
                    encodeURIComponent(this.account.username) +
                    '&password=' +
                    encodeURIComponent(this.account.password) +
                    '&rememberMe=' +
                    this.isRemember;
                // this.$router.push({ path: '/index' });
                this.$api.post(
                    '/security/login',
                    params,
                    success => {
                        if (this.isRemember) {
                            this.setCookie(
                                'account',
                                JSON.stringify(this.account),
                                3
                            );
                        }
                        let name = {
                            username: this.account.username,
                            nickName: success,
                        };
                        sessionStorage.setItem('account', JSON.stringify(name));
                        this.isLoging = false;
                        this.$message.success('登录成功');
                        let q = this.getQuery();
                        if (q && q.formId) {
                            this.$router.push({
                                path: '/qrCodeTypeIn',
                                query: { formId: q.formId },
                            });
                        } else {
                            this.$router.push({ path: '/index' });
                        }
                    },
                    fal => {
                        this.isLoging = false;
                        this.$message.error(fal);
                    }
                );
            }
        },
        getCookie(cname) {
            var name = cname + '=';
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) === 0) {
                    return this.strUncode(c.substring(name.length, c.length));
                }
            }
            return '';
        },
        setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
            var expires = 'expires=' + d.toGMTString();
            document.cookie =
                cname + '=' + this.strEncode(cvalue) + '; ' + expires;
        },
        getQuery() {
            let param = {};
            let str = window.location.href.split('?');
            if (str.length === 2) {
                let strArr = window.location.href.split('?')[1].split('&');
                strArr.forEach(item => {
                    let s = item.split('=');
                    s.length === 2 ? (param[s[0]] = s[1]) : null;
                });
            }
            // console.log(param);
            return param;
        },
        strEncode(code) {
            var c = String.fromCharCode(code.charCodeAt(0) + code.length);
            for (let i = 1; i < code.length; i++) {
                c += String.fromCharCode(
                    code.charCodeAt(i) + code.charCodeAt(i - 1)
                );
            }
            return encodeURIComponent(c);
        },
        strUncode(code) {
            code = decodeURIComponent(code);
            var c = String.fromCharCode(code.charCodeAt(0) - code.length);
            for (var i = 1; i < code.length; i++) {
                c += String.fromCharCode(
                    code.charCodeAt(i) - c.charCodeAt(i - 1)
                );
            }
            return c;
        },
        close(e) {
            if (e.target === e.currentTarget) {
                this.$emit('close', 1);
            }
        },
        closeDialog() {
            this.$emit('close', 1);
        },
        getCode() {
            this.sendCode();
        },
        checkEmail() {
            //验证邮箱是否已存在
            this.$api.get(
                '/cj_user/checkEmail',
                { email: this.accountSignIn.username },
                success => {}
            );
        },
        sendCode() {
            //发送邮箱验证码
            var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (
                this.accountSignIn.username &&
                this.accountSignIn.username.trim()
            ) {
                let emailName = this.accountSignIn.username.trim();
                if (!reg.test(emailName)) {
                    this.$message.error(
                        '您填写的不是邮箱，请填写您正确的邮箱!'
                    );
                    return;
                }
                this.$api.get(
                    '/cj_user/sendCode',
                    { email: emailName },
                    success => {
                        this.$message.success(
                            '验证码已经发送到您的' +
                                emailName +
                                '邮箱中,请登录邮箱获取验证码填入左侧输入框！'
                        );
                    }
                );
            } else {
                this.$message.error('请填写注册邮箱!');
            }
        },
        createCode(c) {
            let code = '',
                codeLength = parseInt(c); //验证码的长度
            let checkCodeSignUp = document.getElementById('checkCodeSignUp');
            let checkCodeSignIn = document.getElementById('checkCodeSignIn');
            let codeChars = [
                0,
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                'a',
                'b',
                'c',
                'd',
                'e',
                'f',
                'g',
                'h',
                'i',
                'j',
                'k',
                'l',
                'm',
                'n',
                'o',
                'p',
                'q',
                'r',
                's',
                't',
                'u',
                'v',
                'w',
                'x',
                'y',
                'z',
                'A',
                'B',
                'C',
                'D',
                'E',
                'F',
                'G',
                'H',
                'I',
                'J',
                'K',
                'L',
                'M',
                'N',
                'O',
                'P',
                'Q',
                'R',
                'S',
                'T',
                'U',
                'V',
                'W',
                'X',
                'Y',
                'Z',
            ];
            for (let i = 0; i < codeLength; i++) {
                //获取随机验证码下标
                let charNum = Math.floor(Math.random() * 62);
                //组合成指定字符验证码
                code += codeChars[charNum];
            }
            if (checkCodeSignUp) {
                //为验证码区域添加样式名
                checkCodeSignUp.className = 'code';
                //将生成验证码赋值到显示区
                checkCodeSignUp.innerHTML = code;
            }
            if (checkCodeSignIn) {
                //为验证码区域添加样式名
                checkCodeSignIn.className = 'code';
                //将生成验证码赋值到显示区
                checkCodeSignIn.innerHTML = code;
            }
        },
        handleSignIn() {
            //注册
            this.$refs.ruleFormIn.validate(valid => {
                if (valid) {
                    if (
                        this.accountSignIn.password !==
                        this.accountSignIn.repassword
                    ) {
                        this.$message.error('两次填写的登录密码不一致');
                        this.accountSignIn.password = '';
                        this.accountSignIn.repassword = '';
                        return false;
                    }
                    this.isLoging = true;
                    this.$api.post(
                        '/cj_user/register',
                        {
                            uname: this.accountSignIn.nickName,
                            emailVarchar: this.accountSignIn.username,
                            passwordVarchar: this.accountSignIn.password,
                            emailCode: this.accountSignIn.emailCode,
                        },
                        success => {
                            this.isLoging = false;
                            this.$emit('close', 1);
                            this.$message.success('注册成功');
                        },
                        fal => {
                            this.isLoging = false;
                            this.$message.error(fal);
                        }
                    );
                } else {
                    this.$message.error('请完善注册信息');
                    return false;
                }
            });
        },
        handleSignUp() {
            //登录
            if (!this.accountSignUp.username || !this.accountSignUp.password) {
                return this.$message.warning('用户名和密码不能为空');
            }
            this.isLoging = true;
            let params =
                'username=' +
                encodeURIComponent(this.accountSignUp.username) +
                '&password=' +
                encodeURIComponent(this.accountSignUp.password) +
                '&rememberMe=' +
                this.isRemember;
            // this.$router.push({ path: '/index' });
            this.$api.post(
                '/security/login',
                params,
                success => {
                    if (this.isRemember) {
                        this.setCookie(
                            'account',
                            JSON.stringify(this.accountSignUp),
                            3
                        );
                    }
                    let name = {
                        username: this.accountSignUp.username,
                        nickName: success,
                    };
                    sessionStorage.setItem('account', JSON.stringify(name));
                    this.isLoging = false;
                    this.$message.success('登录成功');
                    let q = this.getQuery();
                    if (q && q.formId) {
                        this.$router.push({
                            path: '/qrCodeTypeIn',
                            query: { formId: q.formId },
                        });
                    } else {
                        this.$router.push({ path: '/index' });
                    }
                    // NProgress.start();
                    this.$emit('close', 1);
                },
                fal => {
                    this.isLoging = false;
                    this.$message.error(fal);
                }
            );
        },
        switchSign(b) {
            this.LocalSign = b === 'signIn';
            this.$nextTick(() => {
                this.createCode(4);
            });
        },
        resetForm() {
            this.$refs.ruleFormIn && this.$refs.ruleFormIn.resetFields();
        },
        loginON() {
            this.$api.post(
                '/cj_user/register',
                {
                    uname: 'ajax',
                    emailVarchar: 'zhangcsdn163@163.com',
                    passwordVarchar: '000000',
                    emailCode: '1258',
                },
                success => {},
                fal => {}
            );
        },
    },
};
</script>

<style lang="scss">
.pc-login {
    /*z-index: 2008;*/
    /*position: absolute;*/
    /*top: 100px;*/
    /*left:100px;*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 21;
    .login-content {
        background: #fff;
        position: relative;
        margin: 6vh auto;
        border-radius: 2px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        width: 1160px;
        display: flex;
        height: 600px;
        /*transition: all 0.5s cubic-bezier(0.4, 0.6, 0.05, 1);*/
        /*transition: opacity .8s;*/
        // transform: sign-fade-out;//translateX(-50%);
        // transition: opacity .8s,transform .4s,top .4s;
        &.active {
            animation: sign-dialog-in-out 1s 1;
            -webkit-animation: sign-dialog-in-out 1s 1; /*Safari and Chrome*/
        }
        .login-content-left {
            .el-image {
                width: 376px;
                height: 600px;
            }
        }
        .login-content-right {
            width: 784px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            .close-tag {
                position: absolute;
                right: 10px;
                top: 10px;
                cursor: pointer;
                a {
                    height: 80px;
                    width: 80px;
                    font-size: 30px;
                }
            }
            .login-content-title {
                .login-content-title-inner {
                    margin: 0 auto;
                    text-align: center;
                    border-bottom: 1px solid #c4c2c3;
                    font-size: 18px;
                    height: 42px;
                    line-height: 42px;
                    color: #1994fa;
                    position: relative;
                    & > div {
                        width: 230px;
                        margin: 0 auto;
                    }
                    .border-bottom {
                        position: absolute;
                        height: 2px;
                        background: #1994fa;
                        bottom: -1px;
                        transform: translate(50%, 0);
                    }
                }
            }
            .login-content-wrap {
                width: 60%;
                .login-content-title {
                }
                .login-content-form {
                    .el-form {
                        .el-form-item:not(:last-child) {
                            border-bottom: 1px solid #c4c2c3;
                            margin-bottom: 0;
                            .el-form-item__content {
                                .el-input {
                                    .el-input__inner {
                                        border: none;
                                        height: 72px;
                                        line-height: 72px;
                                        font-size: 16px;
                                        /*width: 60%;*/
                                    }
                                }
                                .el-icon-check {
                                    position: absolute;
                                    right: 20px;
                                    top: 50%;
                                    font-size: 32px;
                                    transform: translateY(-50%);
                                }
                                #checkCodeSignIn,
                                #checkCodeSignUp {
                                    position: absolute;
                                    right: 10px;
                                    bottom: 10px;
                                    font-style: italic;
                                    color: blue;
                                    font-size: 30px;
                                    border: 0;
                                    letter-spacing: 3px;
                                    font-weight: bolder;
                                    cursor: pointer;
                                    width: 150px;
                                    height: 52px;
                                    line-height: 60px;
                                    text-align: center;
                                    vertical-align: middle;
                                    background-color: #c4c2c3;
                                }
                                button.checkCode {
                                    position: absolute;
                                    right: 10px;
                                    bottom: 10px;
                                    padding: 10px;
                                    background: orange;
                                    color: #fff;
                                    &:hover {
                                        background-image: linear-gradient(
                                            270deg,
                                            #fae64e 0%,
                                            #ff8d5a 100%
                                        );
                                        transition: all 0.3s;
                                    }
                                }
                                .el-form-item__error {
                                    top: 80%;
                                    left: 10%;
                                }
                            }
                        }
                        button.signUpButton {
                            /*注册*/
                            width: 100%;
                            margin: 20px 0;
                            font-size: 20px;
                            height: 50px;
                            &:hover {
                                background-image: linear-gradient(
                                    270deg,
                                    #1989fa 0%,
                                    #00d4ff 100%
                                );
                                transition: all 0.3s;
                            }
                        }
                    }

                    .login-footer {
                        /*position: relative;*/
                        /*left: 30%;*/
                        text-align: center;
                        button {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
    .sign-fade-enter-active {
        animation: sign-fade-in 0.3s;
    }

    .sign-fade-leave-active {
        animation: sign-fade-out 0.3s;
    }

    @keyframes sign-fade-in {
        0% {
            transform: translate3d(0, -20px, 0);
            opacity: 0;
        }

        to {
            transform: translateZ(0);
            opacity: 1;
        }
    }

    @keyframes sign-fade-out {
        0% {
            transform: translateZ(0);
            opacity: 1;
        }

        to {
            transform: translate3d(0, -20px, 0);
            opacity: 0;
        }
    }

    @keyframes sign-dialog-in-out {
        from {
            top: -600px;
        }
        to {
            top: 100px;
        }
    }

    @-webkit-keyframes sign-dialog-in-out /*Safari and Chrome*/ {
        from {
            top: -600px;
        }
        to {
            top: 100px;
        }
    }

    input:-webkit-autofill {
        box-shadow: 0 0 0 1000px white inset;
        -webkit-box-shadow: 0 0 0 1000px white inset;
    }
}
@media screen and (max-width: 768px) {
    .pc-login {
        .login-content {
            width: 100%;
            height: 400px;
            margin: 15vh auto;
            &.active {
                animation: sign-dialog-in-out 1s 1;
                -webkit-animation: sign-dialog-in-out 1s 1; /*Safari and Chrome*/
            }
            .login-content-left {
                width: 33.3%;
                .el-image {
                    width: 100%;
                    height: 100%;
                }
            }
            .login-content-right {
                width: 66.6%;
                .close-tag {
                    top: -10px;
                    right: -10px;
                    a {
                        font-size: 20px;
                    }
                }
                .login-content-title {
                    .login-content-title-inner {
                        font-size: 14px;
                        height: 42px;
                        line-height: 42px;
                        position: relative;
                        & > div {
                            width: 100%;
                        }
                        .border-bottom {
                            width: 50%;
                            position: absolute;
                            height: 2px;
                            background: #1994fa;
                            bottom: -1px;
                            transform: translate(50%, 0);
                        }
                    }
                }
                .login-content-wrap {
                    width: 80%;
                    .login-content-form {
                        // 登录的样式
                        .el-form {
                            .el-form-item:not(:last-child) {
                                .el-form-item__content {
                                    .el-input {
                                        .el-input__inner {
                                            height: 72px;
                                            line-height: 72px;
                                            font-size: 14px;
                                        }
                                    }
                                    .el-icon-check {
                                        position: absolute;
                                        right: 10px;
                                        top: 50%;
                                        font-size: 16px;
                                        transform: translateY(-50%);
                                    }
                                    .el-form-item__error {
                                        top: 68%;
                                    }
                                }
                            }
                            .el-form-item:last-child {
                                margin: 0;
                            }
                            button.signUpButton {
                                /*注册*/
                                width: 50%;
                                margin: 20px auto;
                                display: block;
                                font-size: 14px;
                                height: 30px;
                            }
                        }
                        // 注册的样式
                        .el-form.register {
                            .el-form-item:not(:last-child) {
                                .el-form-item__content {
                                    .el-input {
                                        .el-input__inner {
                                            height: 45px;
                                            line-height: 45px;
                                            font-size: 14px;
                                        }
                                    }
                                    .el-icon-check {
                                        right: 0;
                                        font-size: 14px;
                                    }
                                    button.checkCode {
                                        position: absolute;
                                        right: 0;
                                        bottom: 0;
                                        transform: translateY(-50%);
                                        padding: 5px;
                                        background: orange;
                                        color: #fff;
                                        &:hover {
                                            background-image: linear-gradient(
                                                270deg,
                                                #fae64e 0%,
                                                #ff8d5a 100%
                                            );
                                            transition: all 0.3s;
                                        }
                                    }
                                }
                            }
                            .el-form-item:last-child {
                                margin: 0;
                            }
                            button.signUpButton {
                                /*注册*/
                                width: 50%;
                                margin: 20px auto;
                                display: block;
                                font-size: 14px;
                                height: 30px;
                            }
                        }
                        .login-footer {
                            /*position: relative;*/
                            /*left: 30%;*/
                            font-size: 14px;
                            button {
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>